<template id="dashboard-line-chart">
    <div>
        <v-row class="jh-backend-form-container justify-end ma-0 py-1 pb-xs-2 mt-3">
            <div style="background-color: #fff; height: 40px; line-height: 40px; padding: 0 10px; border-radius: 6px;"
                class="d-flex">
                <span style="font-size: 14px;color: #a5a9ab;">时间区间：</span>
                <v-icon style="color: #a5a9ab;" small class="mr-1">mdi-calendar</v-icon>
                <v-menu class="jh-v-input" transition="scale-transition" offset-y min-width="auto">
                    <template v-slot:activator="{on, attrs}">
                        <v-text-field v-bind="attrs" v-on="on" v-model="startDate" class="jh-v-input mt-1 mr-1" dense
                            single-line filled readonly label="点击此处选择日期"></v-text-field>
                    </template>
                    <v-date-picker color="success" elevation="20" v-model="startDate"
                        @change="doUiAction('reloadChart',$event)"></v-date-picker>
                </v-menu>
                <v-menu class="jh-v-input" transition="scale-transition" offset-y min-width="auto">
                    <template v-slot:activator="{on, attrs}">
                        <v-text-field v-bind="attrs" v-on="on" v-model="endDate" class="jh-v-input mt-1" dense
                            single-line filled readonly label="点击此处选择日期"></v-text-field>
                    </template>
                    <!-- <v-date-picker color="success" elevation="20" v-model="endDate"></v-date-picker> -->
                </v-menu>
            </div>
        </v-row>
        <v-row class="pt-2">
            <v-col cols="12" md="6">
                <v-card class="mx-auto pa-4 mb-4" flat style="max-height: 350px">
                    <div class="echartsContainer" id="dispatchBox"></div>
                </v-card>
            </v-col>
            <v-col cols="12" md="6">
                <v-card class="mx-auto pa-4 mb-4" flat style="max-height: 350px">
                    <div class="echartsContainer" id="flowBox"></div>
                </v-card>
            </v-col>
        </v-row>
    </div>
</template>

<script type="module">
    Vue.component('dashboard-line-chart', {
        template: "#dashboard-line-chart",
        props: {},
        data: () => ({
            startDate: '2023-7-21',
            endDate: '2023-7-27',
            dispatchChartObj: null,
            flowChartObj: null,
            dispatchLegendTitles: ['当日发车', '当日退车'],
            flowLegendTitles: ['当日收款', '当日付款'],
            dispatchViews: {
                "dispatchCar": [["07/24", 10], ["07/25", 5], ["07/26", 6], ["07/27", 4], ["07/28", 8], ["07/29", 1], ["07/30", 2], ["07/31", 2]],
                "returnCar": [["07/24", 8], ["07/25", 5], ["07/26", 9], ["07/27", 8], ["07/28", 3], ["07/29", 2], ["07/30", 5], ["07/31", 1]]
            },
            flowViews: {
                "collection": [["07/24", 65168], ["07/25", 84651], ["07/26", 54965], ["07/27", 75375], ["07/28", 43737], ["07/29", 73757], ["07/30", 17275], ["07/31", 75372]],
                "payment": [["07/24", 7277], ["07/25", 57375], ["07/26", 75374], ["07/27", 24237], ["07/28", 7532], ["07/29", 7533], ["07/30", 35737], ["07/31", 53714]],
            },
            dispatchAxisData: {},
            flowAxisData: {}
        }),
        computed: {},
        watch: {},
        async created() { },
        async mounted() { },
        methods: {
            async doUiAction(uiActionId, uiActionData) {
                switch (uiActionId) {
                    case 'reloadChart':
                        await this.getEndDate(uiActionData);
                        // 在父组件进行请求
                        // await this.getDispatchViews();
                        // await this.getFlowViews();
                        // await this.initDispatchCarCharts();
                        // await this.initFlowCharts();
                        break;
                    case 'getDispatchViews':
                        await this.getDispatchViews(uiActionData);
                        await this.initDispatchCarCharts();
                        break;
                    case 'getFlowViews':
                        await this.getFlowViews(uiActionData);
                        await this.initFlowCharts();
                        break;
                    case 'detail':
                        await this.prepareData(uiActionData);
                        await this.openDetailDrawer();
                        break;
                    default:
                        console.error("[doUiAction] uiActionId not find", { uiActionId });
                        break;
                }
            },

            async getEndDate(startDate) {
                const startDateFormat = dayjs(startDate)
                const endDate = dayjs(startDateFormat.add(6, 'day')).format("YYYY-MM-DD")
                this.endDate = endDate
                // 通知父组件更新date
                this.$emit('updateStartDateAndEndDate', { startDate, endDate })
            },
            async getDispatchViews(data) {
                this.dispatchAxisData = data
            },
            async getFlowViews(data) {
                this.flowAxisData = data
            },
            async checkDomExist(domId, count) {
                const dom = document.getElementById(domId);
                return new Promise(resolve => {
                    if (dom) {
                        resolve(dom);
                    } else {
                        // 如果检验5次都不存在该Dom，返回Null
                        if (count > 5) {
                            resolve(null);
                        } else {
                            setTimeout(async () => {
                                let newCount = count || 0;
                                resolve(await this.checkDomExist(domId, ++newCount));
                            }, 300)
                        }
                    }
                })
            },
            async initDispatchCarCharts() {
                const dispatchBoxDom = await this.checkDomExist('dispatchBox')
                if (dispatchBoxDom) {
                    this.viewsCount = new ViewsCount(dispatchBoxDom, this.dispatchLegendTitles);
                    const { dispatchCarNumber, returnCarNumber, week } = this.dispatchAxisData;
                    this.viewsCount.reload({ dispatchCarNumber, returnCarNumber }, week);
                }
            },
            async initFlowCharts() {
                const flowBoxDom = await this.checkDomExist('flowBox')
                if (flowBoxDom) {
                    this.flowChartObj = new ViewsCount(flowBoxDom, this.flowLegendTitles);
                    const { collectionAmount, paymentAmount, week } = this.flowAxisData;
                    this.flowChartObj.reload({ collectionAmount, paymentAmount }, week);
                }
            }
        }
    })
</script>
<style scoped="">
    .echartsContainer {
        width: 100%;
        height: 300px;
    }
</style>